const App = {
  data() {
    return {
      Chart14: false,
      top: {
        dayd: "2,432",
        dayy: "1,532",
        dfl: "81.5",
        zhl: "12.3",
      },
      scenicSpot: [
        "景点1",
        "景点2",
        "景点3",
        "景点4",
        "景点5",
        "景点6",
        "景点7",
        "景点8",
        "景点9",
        "景点10",
        "景点11",
        "景点12",
      ],
      scenicSets: [
        {
          label: "客流量",
          data: [85, 92, 78, 105, 120, 115, 128, 132, 135, 140, 145, 150],
          backgroundColor: "rgba(59, 130, 246, 0.1)",
          borderColor: "rgba(59, 130, 246, 1)",
          borderWidth: 2,
          tension: 0.3,
          fill: true,
        },
      ],
    };
  },
  mounted() {
    this.top4(); //四个指标
    this.initforecastChart14(); //景点实时客流量趋势
    this.initdailyComparisonChart(); //预订与实际到访对比(日)
    this.initweeklyComparisonChart(); //预订与实际到访对比(周)
    this.inittimeDistributionChart(); //客流分布分析
    this.initticketTypeChart(); //票种占比
    this.initreserve(); //预定票和核销情况
  },
  methods: {
    //四个指标
    top4() {
      // const _this = this;
      // $.ajax({
      //   headers: requestHeaders(),
      //   url: `${mh}/requestForward/requestForward?RequestURL=${encodeURIComponent(
      //     `/admin/charts/top3`
      //   )}`,
      //   type: "get",
      //   dataType: "json",
      //   complete: function (XMLHttpRequest) {
      //     requestPretreatment(XMLHttpRequest);
      //   },
      //   success: function (res) {
      //     console.log(res);
      //     _this.top = res.data;
      //   },
      // });
    },
    initforecastChart14() {
      const forecastCtx = document
        .getElementById("forecastChart14")
        .getContext("2d");
      // 1. 如果已有 Chart 实例，先销毁（避免重复渲染）
      if (this.forecastChartInstance14) {
        this.forecastChartInstance14.destroy();
      }
      this.forecastChartInstance14 = new Chart(forecastCtx, {
        type: "line",
        data: {
          labels: this.scenicSpot,
          datasets: this.scenicSets,
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false,
            },
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: "rgba(0, 0, 0, 0.05)",
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
        },
      });
    },
    initdailyComparisonChart() {
      const dailyComparisonCtx = document
        .getElementById("dailyComparisonChart")
        .getContext("2d");
      // 1. 如果已有 Chart 实例，先销毁（避免重复渲染）
      if (this.dailyComparisonChartInstance) {
        this.dailyComparisonChartInstance.destroy();
      }
      this.dailyComparisonChartInstance = new Chart(dailyComparisonCtx, {
        type: "bar",
        data: {
          labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          datasets: [
            {
              label: "预订量",
              data: [1200, 1100, 1300, 1400, 1500, 1800, 2000],
              backgroundColor: "rgba(59, 130, 246, 0.7)",
            },
            {
              label: "实际到访",
              data: [1000, 950, 1100, 1200, 1300, 1500, 1700],
              backgroundColor: "rgba(16, 185, 129, 0.7)",
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: "rgba(0, 0, 0, 0.05)",
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
        },
      });
    },
    initweeklyComparisonChart() {
      const weeklyComparisonCtx = document
        .getElementById("weeklyComparisonChart")
        .getContext("2d");
      // 1. 如果已有 Chart 实例，先销毁（避免重复渲染）
      if (this.weeklyComparisonChartInstance) {
        this.weeklyComparisonChartInstance.destroy();
      }
      this.weeklyComparisonChartInstance = new Chart(weeklyComparisonCtx, {
        type: "bar",
        data: {
          labels: ["第1周", "第2周", "第3周", "第4周"],
          datasets: [
            {
              label: "预订量",
              data: [1200, 1100, 1300, 1400, 1500, 1800, 2000],
              backgroundColor: "rgba(59, 130, 246, 0.7)",
            },
            {
              label: "实际到访",
              data: [1000, 950, 1100, 1200, 1300, 1500, 1700],
              backgroundColor: "rgba(16, 185, 129, 0.7)",
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: "rgba(0, 0, 0, 0.05)",
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
        },
      });
    },
    inittimeDistributionChart() {
      const timeDistributionCtx = document
        .getElementById("timeDistributionChart")
        .getContext("2d");
      // 1. 如果已有 Chart 实例，先销毁（避免重复渲染）
      if (this.timeDistributionChartInstance) {
        this.timeDistributionChartInstance.destroy();
      }
      this.timeDistributionChartInstance = new Chart(timeDistributionCtx, {
        type: "bar",
        data: {
          labels: ["9-11", "11-13", "13-15", "15-17", "17-19", "19-21"],
          datasets: [
            {
              label: "客流量",
              data: [300, 450, 400, 350, 500, 200],
              backgroundColor: "rgba(99, 102, 241, 0.7)",
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false,
            },
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: "rgba(0, 0, 0, 0.05)",
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
        },
      });
    },
    initticketTypeChart() {
      const ticketCtx = document
        .getElementById("ticketTypeChart")
        .getContext("2d");
      // 1. 如果已有 Chart 实例，先销毁（避免重复渲染）
      if (this.ticketTypeChartInstance) {
        this.ticketTypeChartInstance.destroy();
      } // 2. 新增：新增票种占比图表
      this.ticketTypeChartInstance = new Chart(ticketCtx, {
        type: "doughnut",
        data: {
          // 普通门票、VIP门票、团体票、特殊场合票
          labels: ["普通门票", "VIP门票", "特殊场合票", "团体票"],
          datasets: [
            {
              data: [45, 15, 20, 10, 10],
              backgroundColor: ["#1D4ED8", "#86EFAC", "#F97316", "#C4B5FD"],
              borderWidth: 0,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: "right",
            },
          },
        },
      });
    },
    initreserve() {
      const yearlyCtx = document.getElementById("yearlyHistoryChart");
      if (this.yearlyHistoryChartInstance) {
        this.yearlyHistoryChartInstance.destroy();
      }
      this.yearlyHistoryChartInstance = new Chart(yearlyCtx, {
        type: "line",
        data: {
          labels: [" 5日", "15日", "30日", "60日", "90日", "90日以上"],
          datasets: [
            {
              label: "客流量",
              data: [
                25000, 28000, 32000, 35000, 40000, 45000, 50000, 48000, 42000,
                38000, 35000, 30000,
              ],
              borderColor: "#10b981",
              backgroundColor: "rgba(16, 185, 129, 0.1)",
              tension: 0.3,
              fill: true,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false,
            },
          },
          scales: {
            y: {
              beginAtZero: false,
              grid: {
                color: "rgba(0, 0, 0, 0.05)",
              },
            },
            x: {
              grid: {
                display: false,
              },
            },
          },
        },
      });
    },
  },
};
// Vue 2 初始化
new Vue({
  el: "#app",
  data: App.data(),
  mounted: App.mounted,
  methods: App.methods,
});
